<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>账号管理</title>

    <link rel="stylesheet" th:href="@{/css/layui.css}">
    <script th:src="@{/js/vue.min.js}"></script>
    <script th:src="@{/js/axios.min.js}"></script>
    <script th:src="@{/js/layui.js}"></script>

    <style>
        .layui-table-cell{
            display:table-cell;
            vertical-align: middle;
        }
    </style>
</head>
<body>

<div id="container" class="layui-fluid">


    <div>
        <h1 style="text-align: center;font-size: 20px;font-weight: bolder;margin-top: 20px">用户信息表</h1>
    </div>

    <table id="table"  style="margin-top: 10px">

    </table>
</div>
</body>


<script th:inline="none">


    let vue = new Vue({
        el: '#container',
        data: {
            date: new Date()
        },
        methods: {},
        mounted: function () {

        }

    })

    layui.use('table', function () {
        var table = layui.table;

        table.render({
            elem: '#table'
            , url: "/manager/userInfo"
            , cols: [[
                {field: 'id', title: "编号ID", width: "10%"},
                {field: 'name', title: "姓名", width: "10%"},
                {field: 'sex', title: "性别", width: "5%"},
                {field: 'address', title: "地址", width: "25%"},
                {field: 'homePhone', title: "家庭电话", width: "15%"},
                {field: 'workPhone', title: "公司电话", width: "15%"},
                {field: 'phones', title: "手机号", width: "20%"}
            ]],
            where: {
                date: vue.$data.date
            }
            , parseData: function (res) {

                console.log(res)
                for (var i = 0; i < res.list.length; i++) {
                    var s = '<dl>';
                    if (res.list[i].phones == null) {
                        continue;
                    }
                    for (var j = 0; j < res.list[i].phones.length; j++) {
                        s = s + '<dd>' + res.list[i].phones[j].phoneNumber + '</dd>';
                    }
                    s += '</dl>'
                    res.list[i].phones = s;

                    var ns = ""
                    if(res.list[i].address != '') {
                        var ss = res.list[i].address.split(",");
                        for (var j = 0 ; j < ss.length ; j++) {
                            ns+=ss[j];
                        }
                    }
                    res.list[i].address = ns;
                }
                return {
                    "code": 0,
                    "msg": "",
                    "count": res.total,
                    "data": res.list
                }
            },
            page: true
            , limit: 5
            , limits: [5, 10, 20, 30]
        })
    })


</script>

</html>